<template>
	<view>
		<image class="top-bg" src="../../static/leader/banner.png" />
		<view class="content-area">
			<view class="items_box grid-area">
				<u-grid :border="false" col="3">
					<u-grid-item @click="toPage(listItem.url)" v-for="(listItem,listIndex) in list" :key="listIndex">
						<image class="grid-img" :src="listItem.img" />
						<text class="grid-text">{{listItem.title}}</text>
					</u-grid-item>
				</u-grid>
			</view>
			<view v-if="messageList&&messageList.length>0" @click="toPage('/pages_two/mine/message')" class="items_box margin-top between_layout message-area">
				<view class="start_layout" style="width: 100%;">
					<image style="width: 142rpx;height: 36rpx;flex-shrink: 0;" src="../../static/company/message.png" />
					<view style="width: 100%;" class="one_line desc-area">
						<u-notice-bar direction="column" color="#333333"
							bgColor="#fff" icon="" :text="messageList"></u-notice-bar>
					</view>
				</view>
				<view class="end_layout more-area">更多<u-icon name="arrow-right"></u-icon></view>
			</view>
			<!-- 企业角色展示内容 -->
			<view v-if="roles.includes('common')">
				<view v-if="roles.toString()=='common'">
					<view class="margin-tb company-name">企业基础信息</view>
					<view style="position: relative;">
						<image style="width: 100%;height: 200rpx;" src="../../static/company/enter-bg.png" />
						<view class="enter-area">
							<view class="enter-info">企业认证快捷入口</view>
							<view class="start_layout">
								<view @click="toPage('/pages_two/mine/company/authSubmit')" class="enter-btn">点击进入
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else>
					<view class="between_layout">
						<view class="margin-tb company-name">项目列表</view>
						<image style="width: 98rpx;height: 48rpx;"
							@click="toPage('/pages_two/project/allProject?entryStatus=0')"
							src="../../static/company/index_button_more.png" />
					</view>
					<allList showAuditState :listData="projectData" :entryStatus="0"></allList>
				</view>
			</view>
			<!-- 经开区和领导角色展示-->
			<view v-else>
				<view class="number-area margin-top">
					<view class="between_layout padding-lr">
						<view class="company-name">项目数据统计<span style="font-size: 24rpx;">（个）</span></view>
						<image style="width: 92rpx;height: 92rpx;" src="../../static/leader/num-icon.png" />
					</view>
					<view class="count-area">
						<u-grid :border="false" col="4">
							<u-grid-item :class="listIndex%4==3?'':'grid-item'" v-for="(listItem,listIndex) in numList"
								:key="listIndex">
								<view class="count-text">{{listItem.count}}</view>
								<text class="count-name">{{listItem.title}}</text>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
				<view class="margin-tb company-name">年度新开工项目情况</view>
				<view class="start_layout">
					<view class="shadow-area">项目总数 <span class="color-num"
							style="color:#3389FF">{{numObj1.count1}}</span> 个，总投资 <span class="color-num"
							style="color:#FD8A19">{{numObj1.count2}}</span> 亿元</view>
				</view>
				<view class="end_layout margin-tb">
					<view class="shadow-area">10亿以上项目总数 <span class="color-num"
							style="color:#3389FF">{{numObj1.count3}}</span> 个，总投资
						<span class="color-num" style="color:#FD8A19">{{numObj1.count4}}</span> 亿元
					</view>
				</view>
				<view class="start_layout">
					<view class="shadow-area">本月新开工项目总数 <span class="color-num"
							style="color:#3389FF">{{numObj1.count5}}</span> 个，总投资
						<span class="color-num" style="color:#FD8A19">{{numObj1.count6}}</span> 亿元
					</view>
				</view>
				<view class="margin-tb company-name">年度在批项目推进情况</view>
				<view class="top-num between_layout">
					<view class="start_layout">
						<image style="width: 28rpx;height: 28rpx;" src="../../static/leader/num-all.png" />
						<view class="left-name">项目总数</view>
					</view>
					<view class="right-num"><span
							style="font-weight: bold;font-size: 36rpx;margin-right: 10rpx;">{{numObj2.count1}}</span>个
					</view>
				</view>
				<u-row class="margin-tb" justify="space-between" gutter="15">
					<u-col span="4">
						<view style="color: #1890FF;background: rgba(24, 144, 255, 0.1);" class="demo-layout">
							<view class="demo-num"><span
									style="font-weight: bold;font-size: 34rpx;">{{numObj2.count2}}</span>亿元
							</view>
							<view class="demo-name">总投资</view>
						</view>
					</u-col>
					<u-col span="4">
						<view style="color: #FAAD14;background: rgba(250,173,20, 0.1);" class="demo-layout">
							<view class="demo-num"><span
									style="font-weight: bold;font-size: 34rpx;">{{numObj2.count3}}</span>个
							</view>
							<view class="demo-name">10亿以上项目总数</view>
						</view>
					</u-col>
					<u-col span="4">
						<view style="color: #0CC566;background: rgba(12,197,102, 0.1);" class="demo-layout">
							<view class="demo-num"><span
									style="font-weight: bold;font-size: 34rpx;">{{numObj2.count4}}</span>亿元
							</view>
							<view class="demo-name">10亿以上项目总投资</view>
						</view>
					</u-col>
				</u-row>
				<u-row justify="space-between" gutter="15">
					<u-col span="6">
						<image @click="toPage('/pages_two/problem/company/index')" style="width: 100%;height: 182rpx;"
							src="../../static/leader/problem1.png" />
					</u-col>
					<u-col span="6">
						<image @click="toPage('/pages_two/problem/company/index?type=1')"
							style="width: 100%;height: 182rpx;" src="../../static/leader/problem2.png" />
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCompanyDetail,
		listProjectInfo,
		myToDoList,
		projectData,
		newlyStarted,
		onLot
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				roles: [],
				messageList: [],
				projectData: [],
				list: [],
				list1: [{
						img: require('../../static/company/grid-icon1.png'),
						title: '项目申报',
						url: '/pages_two/project/addProject?title=全部项目'
					},
					{
						img: require('../../static/company/grid-icon2.png'),
						title: '在批项目',
						url: '/pages_two/project/approveList?entryStatus=2&title=在批项目'
					},
					{
						img: require('../../static/company/grid-icon3.png'),
						title: '在建项目',
						url: '/pages_two/project/approveList?entryStatus=3&title=在建项目'
					},
					{
						img: require('../../static/company/grid-icon4.png'),
						title: '分期项目',
						url: '/pages_two/stage/index?entryStatus=7'
					},
					{
						img: require('../../static/company/grid-icon6.png'),
						title: '企业反映问题',
						url: '/pages_two/problem/company/index'
					},
					{
						img: require('../../static/company/grid-icon5.png'),
						title: '项目进度问题',
						url: '/pages_two/problem/company/index?type=1'
					},
				],
				list2: [{
						img: require('../../static/company/grid-icon1.png'),
						title: '项目采集',
						url: '/pages_two/project/addProject'
					},
					{
						img: require('../../static/company/grid-icon2.png'),
						title: '上报项目',
						url: '/pages_two/project/allProject?entryStatus=0'
					},
					{
						img: require('../../static/company/grid-icon3.png'),
						title: '分期项目',
						url: '/pages_two/stage/index'
					},
					{
						img: require('../../static/company/grid-icon4.png'),
						title: '在批审核',
						url: '/pages_two/mine/auditList/index?entryStatus=2&title=在批审核'
					},
					{
						img: require('../../static/company/grid-icon6.png'),
						title: '在建审核',
						url: '/pages_two/mine/auditList/index?entryStatus=3&title=在建审核'
					},
					{
						img: require('../../static/company/grid-icon5.png'),
						title: '竣工审核',
						url: '/pages_two/mine/auditList/index?entryStatus=4&title=竣工审核'
					},
				],
				numList: [{
					count: 11,
					title: '全部项目'
				}, {
					count: 33,
					title: '取消项目'
				}, {
					count: 2,
					title: '在建项目'
				}, {
					count: 4,
					title: '竣工项目'
				}, {
					count: 6,
					title: '签约项目'
				}, {
					count: 7,
					title: '在批项目'
				}, {
					count: 21,
					title: '投产项目'
				}, {
					count: 67,
					title: '达效项目'
				}, ],
				numObj1: {},
				numObj2: {}
			}
		},
		onLoad() {
			this.roles = uni.getStorageSync("roleinfo")
			if (this.roles.toString() == 'common') {
				this.list = this.list1
			} else if (this.roles.includes('company')) {
				this.list = this.list1
				listProjectInfo({
					pageNum: 1,
					pageSize: 5,
					state: 0
				}).then(res => {
					this.projectData = res.rows
				})
			} else {
				this.list = this.list2
				projectData().then(res => {
					this.numList[0].count = res.data.count1
					this.numList[1].count = res.data.count2
					this.numList[2].count = res.data.count3
					this.numList[3].count = res.data.count3
					this.numList[4].count = res.data.count4
					this.numList[5].count = res.data.count5
					this.numList[6].count = res.data.count6
					this.numList[7].count = res.data.count7
				})
				newlyStarted().then(res => {
					this.numObj1 = res.data
				})
				onLot().then(res => {
					this.numObj2 = res.data
				})
			}
			myToDoList().then(res => {
				if (res.data && res.data.length > 0) {
					res.data.forEach(item => {
						this.messageList.push(item.title)
					})
				}
			})
		},
		methods: {
			toPage(url) {
				if (this.roles.toString() == 'common') {
					if (url == '/pages_two/mine/message' || url == '/pages_two/mine/company/authSubmit') {
						uni.navigateTo({
							url: url
						})
					} else {
						uni.showToast({
							title: '请认证通过后再进行操作！',
							icon: 'none',
							duration: 2000
						})
					}
				} else {
					uni.navigateTo({
						url: url
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-bg {
		width: 100%;
		height: 400rpx;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.content-area {
		width: 100%;
		padding: 220rpx 30rpx 30rpx 30rpx;

		.grid-area {
			padding-top: 30rpx;

			.grid-img {
				width: 100rpx;
				height: 114rpx;
			}

			.grid-text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
				text-align: center;
				font-style: normal;
				text-transform: none;
				margin-bottom: 32rpx;
			}
		}

		.message-area {
			padding: 10rpx 20rpx;

			.desc-area {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #333333;
				margin: 0 20rpx;
			}

			.more-area {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				flex-shrink: 0;
			}
		}

		.company-name {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
		}

		.enter-area {
			position: absolute;
			top: 50%;
			left: 30rpx;
			transform: translateY(-50%);

			.enter-info {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.enter-btn {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #3389FF;
				background: #FFFFFF;
				border-radius: 30rpx;
				padding: 9rpx 15rpx;
				margin-top: 50rpx;
			}
		}

		.shadow-area {
			background: linear-gradient(180deg, rgba(239, 246, 254, 0.8) 0%, rgba(251, 252, 255, 0.8) 46%, rgba(255, 255, 255, 0.8) 100%);
			box-shadow: 0rpx 4rpx 10rpx 1rpx rgba(51, 137, 255, 0.1);
			border-radius: 16rpx;
			border: 2rpx solid #FFFFFF;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #333333;
			padding: 20rpx 30rpx;

			.color-num {
				font-size: 28rpx;
				margin: 0 10rpx;
			}
		}

		.top-num {
			background: rgba(24, 144, 255, 0.1);
			border-radius: 10rpx;
			padding: 30rpx;

			.left-name {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				margin-left: 10rpx;
			}

			.right-num {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #5B6575;
			}
		}

		.demo-layout {
			border-radius: 10rpx;
			padding: 20rpx 0;
			text-align: center;

			.demo-num {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 20rpx;
			}

			.demo-name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				margin-top: 13rpx;
			}
		}
	}
</style>